<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<!DOCTYPE HTML>
<html>
	<head>
		<title>Clafu - クラウドアナウンスファンディング</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.dropotron.min.js"></script>
		<script src="js/skel.min.js"></script>
		<script src="js/skel-layers.min.js"></script>
		<script src="js/init.js"></script>
		<noscript>
			<link rel="stylesheet" href="css/skel.css" />
			<link rel="stylesheet" href="css/style.css" />
			<link rel="stylesheet" href="css/style-desktop.css" />
		</noscript>
		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
	</head>
	<body class="homepage">

		<!-- Header -->
			<div id="header-wrapper">
				<div id="header">

					<!-- Logo -->
						<h1><a href="/">Clafu</a></h1>

					<!-- Nav -->
						<nav id="nav">
							<ul>
								<li class="current"><a href="/">トップ</a></li>
								<li>
									<a href="">告知を探す</a>
									<ul>
										<li><a href="#">ニュース</a></li>
										<li><a href="#">経済・政治</a></li>
										<li><a href="#">テクノロジー</a></li>
										<li><a href="#">その他</a></li>
									</ul>
								</li>
								<li><a href="no-sidebar.html">イベント</a></li>
								<li><a href="left-sidebar.html">Clafuとは</a></li>
								<li><a href="right-sidebar.html">利用規約</a></li>
								<li><a href="no-sidebar.html">プラバシーポリシー</a></li>
								<li><a href="http://takahara-kou.appspot.com/" target="_blank">運用者情報</a></li>
							</ul>
						</nav>

					<!-- Banner -->
						<section id="banner" style="background-size: auto auto;">
							<header>
								<h2>シェアさせていただきます！</h2>
								<p>クラウドアナウンスファンディングを使えば、</p>
								<p>SNS告知のためのフォロワー集めはもう必要ない！</p>
								<p style="font-size: 1.0em;text-align: right;margin-top: 1em;">
									<a href="#" style="color: #fff;">クラウドアナウンスファンディングとは</a>
								</p>
							</header>
						</section>

					<!-- Intro -->
						<section id="intro" class="container">
							<div class="row">
								<div class="4u">
									<section class="first">
										<i class="icon featured fa-heart"></i>
										<header>
											<h2>人の告知に協力しよう</h2>
										</header>
										<p>自分のソーシャルアカウントを使ってだれかの告知を手伝うと感謝のハートをもらえる。</p>
									</section>
								</div>
								<div class="4u">
									<section class="middle">
										<i class="icon featured alt fa-heart"></i>
										<header>
											<h2>ハートを集めよう</h2>
										</header>
										<p>他人の告知を手伝えば手伝うほどハートがどんどん溜まる。</p>
									</section>
								</div>
								<div class="4u">
									<section class="last">
										<i class="icon featured alt2 fa-heart"></i>
										<header>
											<h2>自分の告知を出そう</h2>
										</header>
										<p>溜まったハートの数だけ沢山の人があなたの告知に協力してくれる。</p>
									</section>
								</div>
							</div>
							<footer>
								<ul class="actions">
									<li><a href="#" class="button big">始める(ログイン)</a></li>
									<li><a href="#" class="button alt big">もっと見る</a></li>
								</ul>
							</footer>
						</section>

				</div>
			</div>

		<!-- Main -->
			<div id="main-wrapper">
				<div class="container">
					<div class="row">
						<div class="12u">

							<!-- Blog -->
								<section>
<!-- 									<header class="major">
										<h2>Clafuのここが凄い</h2>
									</header> -->
									<div class="row">
										<div class="6u">
											<section class="box">
												<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
												<header>
													<h3>クラウドツイーティングを使おう</h3>
												</header>
												<p>Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit  adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
												<footer>
													<ul class="actions">
														<li><a href="#" class="button icon fa-file-text">もっと見る</a></li>
<!-- 														<li><a href="#" class="button alt icon fa-comment">33 comments</a></li> -->
													</ul>
												</footer>
											</section>
										</div>
										<div class="6u">
											<section class="box">
												<a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
												<header>
													<h3>Clafuが沢山の人に選ばれる理由</h3>
												</header>
												<p>Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit  adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
												<footer>
													<ul class="actions">
														<li><a href="#" class="button icon fa-file-text">もっと見る</a></li>
<!-- 														<li><a href="#" class="button alt icon fa-comment">33 comments</a></li> -->
													</ul>
												</footer>
											</section>
										</div>
									</div>
								</section>

						</div>
					</div>



					<div class="row">
						<div class="12u">

							<!-- Portfolio -->
								<section>
									<header class="major">
										<h2>キャンペーンでハートをゲットしよう</h2>
									</header>
									<div class="row">
										<div class="4u">
											<section class="box">
												<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
												<header>
													<h3>新規登録キャンペーン</h3>
												</header>
												<p>Clafuに新規登録するとハートを50個プレゼントします。</p>
												<footer>
													<a href="#" class="button alt">もっと見る</a>
												</footer>
											</section>
										</div>
										<div class="4u">
											<section class="box">
												<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
												<header>
													<h3>友達紹介キャンペーン</h3>
												</header>
												<p>友達を一人紹介するたびにハートを20個プレゼントします。</p>
												<footer>
													<a href="#" class="button alt">もっと見る</a>
												</footer>
											</section>
										</div>
										<div class="4u">
											<section class="box">
												<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
												<header>
													<h3>Clafu紹介キャンペーン</h3>
												</header>
												<p>ブログでClafuについての記事を書くとハートを50個プレゼントします。</p>
												<footer>
													<a href="#" class="button alt">もっと見る</a>
												</footer>
											</section>
										</div>
									</div>
									<%-- <div class="row">
										<div class="4u">
											<section class="box">
												<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
												<header>
													<h3>Blandit sed adipiscing</h3>
												</header>
												<p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit  adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p>
												<footer>
													<a href="#" class="button alt">Find out more</a>
												</footer>
											</section>
										</div>
										<div class="4u">
											<section class="box">
												<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a>
												<header>
													<h3>Etiam nisl consequat</h3>
												</header>
												<p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit  adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p>
												<footer>
													<a href="#" class="button alt">Find out more</a>
												</footer>
											</section>
										</div>
										<div class="4u">
											<section class="box">
												<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
												<header>
													<h3>Dolore nisl feugiat</h3>
												</header>
												<p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit  adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p>
												<footer>
													<a href="#" class="button alt">Find out more</a>
												</footer>
											</section>
										</div>
									</div> --%>
								</section>

						</div>
					</div>

				</div>
			</div>

		<!-- Footer -->
			<div id="footer-wrapper">
				<section id="footer" class="container">
					<div class="row">
						<div class="8u">
							<section>
								<header>
									<h2>最新情報・お知らせ</h2>
								</header>
								<ul class="dates">
									<li>
										<span class="date">10 <strong>12</strong></span>
										<h3><a href="#">Clafuのβ版公開</a></h3>
										<p>先着100名様によるレビューを開始しました。</p>
									</li>
									<li>
										<span class="date">10 <strong>23</strong></span>
										<h3><a href="#">Clafuが正式リリースしました。</a></h3>
										<p>皆様の御蔭様で無事にリリース致しました。これからも宜しくお願い致します。</p>
									</li>
<!-- 									<li>
										<span class="date">Jan <strong>15</strong></span>
										<h3><a href="#">Magna tempus lorem feugiat</a></h3>
										<p>Dolore consequat sed phasellus lorem sed etiam nullam dolor etiam sed amet sit consequat.</p>
									</li>
									<li>
										<span class="date">Jan <strong>12</strong></span>
										<h3><a href="#">Dolore tempus ipsum feugiat nulla</a></h3>
										<p>Feugiat lorem dolor sed nullam tempus lorem ipsum dolor sit amet nullam consequat.</p>
									</li>
									<li>
										<span class="date">Jan <strong>10</strong></span>
										<h3><a href="#">Blandit tempus aliquam?</a></h3>
										<p>Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore.</p>
									</li> -->
								</ul>
							</section>
						</div>
						<div class="4u">
							<section>
								<header>
									<h2>ソーシャルメディア</h2>
								</header>
								<ul class="social">
									<li><a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a></li>
									<li><a class="icon fa-facebook" href="#"><span class="label">Facebook</span></a></li>
									<li><a class="icon fa-google-plus" href="#"><span class="label">Google+</span></a></li>
								</ul>
								<ul class="contact">
									<li>
										<h3>Contact</h3>
										<p><a href="#">info@clafu.com</a></p>
									</li>
								</ul>
							</section>
						</div>
					</div>
					<div class="row">
						<div class="12u">

							<!-- Copyright -->
								<div id="copyright">
									<ul class="links">
										<li>&copy; Clafu. All rights reserved.</li>
									</ul>
								</div>

						</div>
					</div>
				</section>
			</div>

	</body>
</html>